<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="css/style.css">
</head>

<body>
    <div class="wrap">
        <ul class="list">
            <li class="item active"></li>
            <li class="item"></li>
            <li class="item"></li>
            <li class="item"></li>
            <li class="item"></li>
        </ul>
        <ul class="pointList">
            <li class="point" date.index="0"></li>
            <li class="point" date.index="1"></li>
            <li class="point" date.index="2"></li>
            <li class="point" date.index="3"></li>
            <li class="point" date.index="4"></li>
        </ul>
        <button type="button" class="btn" id="goPre">&#60</button>
        <button type="button" class="btn" id="goNext">&#62</button>
    </div>





    <script type="text/javascript">
        var items = document.getElementsByClassName("item");
        var points = document.getElementsByClassName("point");
        var goPreBtn = document.getElementById("goPre");
        var goNextBtn = document.getElementById("goNext");

        var index = 0;//图片索引
        //清除所有效果
        var clearActive = function () {
            for (var i = 0; i < items.length; i++)
                items[i].className = "item";
            for (var i = 0; i < points.length; i++)
                points[i].className = "point";
        }
        var goIndex = function () {
            clearActive();
            items[index].className = "item active";
            points[index].className = "point active";
        }
        var goNext = function () {
            if (index < 4) {
                index++;
            }
            else {
                index = 0;
            }
            goIndex();
        }
        var goPre = function () {
            if (index == 0) {
                index = 0;
            }
            else {
                index--;
            }
            goIndex();
        }
        goNextBtn.addEventListener('click', function () {
            goNext();
        })
        goPreBtn.addEventListener('click', function () {
            goPre();
        })
        var timer = setInterval(function () {
            goNext();
        }, 3000)

        var pointNum = 0;
        for (let i = 0; i < points.length; i++) {
            points[i].addEventListener('click', function () {
                pointNum = index;
                index = i;
                // points[pointNum].className = 'point';
                points[index].className = 'point active';
                items[pointNum].className = 'item';
                items[index].className = 'item active';
            })
        }//肥肠经典，我饿了。


    </script>
</body>

</html>